<template>
  <div class="w-full upload-box mt-20">
    <el-upload
      v-if="!fileList.length"
      ref="upload"
      drag
      action="#"
      class="upload w-full"
      :accept="uploadConfig.accept"
      :headers="{'Authorization': $store.getters.userInfo.token}"
      :data="payload"
      :on-success="uploadSuccess"
      :on-exceed="handleExceed"
      :limit="uploadConfig.limit"
      :disabled="uploadConfig.disabled"
      :on-error="uploadError"
      :before-upload="beforeUpload"
      :on-remove="handleRemove"
      :file-list="fileList"
      :http-request="httpRequest"
      :show-file-list="false"
    >
      <img class="file-icon" src="@/assets/images/backstage/flie.png" alt="">
      <div class="el-upload__text">将文件拖到此处，或 <em>{{ uploadConfig.upBtnText }}</em>
        <div class="type mt-10">支持 .xls 或 .xlsx 格式</div>
      </div>
      <div slot="tip" class="el-upload__tip mt-20">
        <i class="el-icon-bottom"></i>
        <a :href="uploadConfig.tipUrl">{{ uploadConfig.tips }}</a>
      </div>
    </el-upload>
    <div v-else class="file-box flex-between align-center">
      <div class="flex align-center">
        <img class="excel-icon mr-10" src="@/assets/images/backstage/excel.png" alt="">
        <div>{{ fileList[0].name }}</div>
      </div>
      <div class="del pointer" @click="handleDel">
        <i class="el-icon-delete"></i>
        删除
      </div>
    </div>
    <div slot="footer" class="dialog-footer mt-30">
      <el-button size="medium" class="mr-20" type="primary" @click="handleSubmit">
        保 存
      </el-button>
      <el-button size="medium" @click="dialogConfig.show = false">
        取 消
      </el-button>
    </div>
  </div>
</template>
<script>
import Upload from '../../services/upload.js'
export default {
  model: {
    prop: 'files',
    event: 'upload'
  },
  props: {
    files: {
      type: Array,
      default: () => []
    },
    config: {
      type: Object,
      default (val) {
        return {
          disabled: false,
          limit: 1,
          upBtnText: '点击上传',
          accept: '.xls,.xlsx',
          tips: '下载导入模板',
          tipUrl: '',
          urlName: ''
        }
      }
    },
    dialogConfig: {
      type: Object,
      default () {
        return {
          show: false,
          title: '标题',
          width: '30%',
          data: {}
        }
      }
    }
  },
  data () {
    return {
      payload: {
        fileCode: ''
      },
      fileList: []
    }
  },
  computed: {
    uploadConfig () {
      const config = { ...(this.config || {}) }
      const keys = Object.keys(config)
      if (!keys.includes('disabled')) config.disabled = false
      if (!keys.includes('limit')) config.limit = 1
      if (!keys.includes('accept')) config.accept = '.xls,.xlsx'
      if (!keys.includes('upBtnText'))config.upBtnText = '点击上传'
      if (!keys.includes('tips'))config.tips = '导入模板下载'
      if (!keys.includes('tipUrl'))config.tipUrl = ''
      return config
    }
  },
  methods: {
    clearFileList (uid) {

    },
    // 文件删除
    handleRemove (file, fileList) {

    },
    // 校验文件大小
    checkFileSize (size) {
      const res = size < 10 * 1024 * 1024
      if (!res) {
        this.$message.error('上传文件不能超过10M！')
        return false
      }
      return true
    },
    // 清空文件
    clear () {
      this.$refs.upload.clearFiles()
    },
    // 文件上传前的钩子
    beforeUpload (file) {

    },
    // 文件上传失败钩子
    uploadError (err, file, fileList) {
      let msg = '上传出错'
      if (err.message.indexOf('Maximum upload size exceeded')) {
        msg = '文件过大，请重新上传'
      }
      this.$message.error(msg)
    },
    // 文件个数校验
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    // 文件上传成功钩子
    uploadSuccess (response, file, fileList) {
      console.log(response, file, fileList)
    },
    httpRequest (param) {
      this.fileList.push(param.file)
      console.log('🚀 ~ httpRequest ~ this.fileList:', this.fileList)
    },
    handleDel () {
      this.fileList = []
    },
    handleSubmit () {
      if (!this.fileList.length) {
        this.$message.error('请上传文件')
      } else {
        console.log(this.fileList[0])
        const form = new FormData()
        form.append('file', this.fileList[0])
        Upload[this.config.urlName](form).then(res => {
          this.$message.success('导入成功')
          this.dialogConfig.show = false
          this.$emit('reload')
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
// 清除文件上传自带delete键删除提示
::v-deep .el-upload-list__item.is-success.focusing .el-icon-close-tip{
  display: none !important;
  }
  .type{
    font-size: 13px;
    font-weight: 300;
    line-height: 13px;
    color: #999999
  }
  .el-upload__tip{
    font-size: 14px;
    font-weight: 300;
    color: #3680FF;
    a{
      font-size: 14px;
      font-weight: 300;
      color: #3680FF;
    }
  }
  .file-icon{
    width: 40px;
    height: 40px;
    margin: 35px 0 20px 0;
  }
  .file-box{
    height: 70px;
    background: #00000003;
    border: 1px solid #0000001A;
    border-radius: 10px;
    padding: 0 20px;
  }
  .excel-icon{
    width: 30px;
    height: 30px;
  }
  .del{
    font-size: 14px;
    font-weight: 400;
    color: #B0B0B0
  }
</style>

